<template>
<layout>
<view class="header">
  <view class="topbar">
    <tm-sheet :margin="[5]" >
      <tm-segtab :width="636" @change="switchTopBar" :list="list" defaultValue="0"></tm-segtab>
    </tm-sheet>
  </view>
</view>

  <view class="content">
    <tm-sheet color="#fff" :round="3" :shadow="2" v-for="i in [1,2,3,4,5,6,7,8]">
      <view class="item" >
         <view class="left">
           <image src="https://store.tmui.design/api_v2/public/random_picture"></image>
         </view>
        <view class="right">
          <tm-text :font-size="28" _class="text-weight-b text-overflow-1" label="基本示例"></tm-text>
          <tm-text :font-size="24"  color="#918484"  label="基本示例"></tm-text>
          <tm-text _class="intro text-overflow-2" color="#918484" >假如文字足够长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长</tm-text>
          <view class="tags flex-row flex flex-wrap">
              <tm-tag size="xs"  color="#918484" label="波多野结衣"></tm-tag>
          </view>
        </view>
      </view>
    </tm-sheet>
  </view>
</layout>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import layout from './components/layout.nvue';
import TmText from "@/infrastructure/vendor/tmui/components/tm-text/tm-text.vue";
const recommends = [
  { text: '动漫', id: '1' },
  { text: '电影', id: '2' },
  { text: '电视剧', id: '3' },
  { text: '短剧', id: '4' }
]
const list = ref([
  { text: '推荐', id: '0' },
] . concat(recommends))

function switchTopBar(val){
  console.log(val)
}
</script>

<style lang="scss" scoped>

.item{
  display: flex;
  justify-content: space-between;
  .left{
    width: 30%;
    image{
      width: 100%;
      height: 240rpx;
    }
  }
  .right{
    width: 68%;
    display: flex;
    flex-direction: column;
    gap: 10rpx 10rpx;
  }
}
</style>
